<template>
  <div class="contentView" v-loading="formLoading" :style="`height:${contentHeight}px`">
    <div class="routeHeader mb-5px"><el-button @click="goBack">关 闭</el-button></div>
    <el-scrollbar :style="`height:${contentHeight - 63}px`">
      <div class="text-16px font-700 mb-20px">基本信息</div>
      <el-form
        class="mb-25px"
        :model="formData"
        :inline="true"
        label-width="110px"
        v-loading="formLoading"
      >
        <el-form-item label="产品编号 :" prop="productNumber">
          <span class="!w-220px text-16px font-500">{{ formData.productNumber }}</span>
        </el-form-item>
        <el-form-item label="产品名称 :" prop="productName">
          <span class="!w-220px text-16px font-500">{{ formData.productName }}</span>
        </el-form-item>
        <el-form-item label="部件编码 :" prop="partNumber">
          <span class="!w-220px text-16px font-500">{{ formData.partNumber }}</span>
        </el-form-item>
        <el-form-item label="部件名称 :" prop="partName">
          <span class="!w-220px text-16px font-500">{{ formData.partName }}</span>
        </el-form-item>
        <el-form-item label="图纸图号 :" prop="productDrawingNumber">
          <span class="!w-220px text-16px font-500">{{ formData.productDrawingNumber }}</span>
        </el-form-item>
        <el-form-item label="部件规格 :" prop="partSpecification">
          <span class="!w-220px text-16px font-500">{{ formData.partSpecification }}</span>
        </el-form-item>
        <el-form-item label="工艺名称 :" prop="carftName">
          <span class="!w-220px text-16px font-500">{{ formData.carftName }}</span>
        </el-form-item>
        <el-form-item label="创建日期 :" prop="createTime">
          <span class="!w-220px text-16px font-500">{{ formatDate(formData.createTime) }}</span>
        </el-form-item>
        <el-form-item label="所属产品类型 :" prop="productType">
          <span class="!w-220px text-16px font-500">{{ formData.productType }}</span>
        </el-form-item>
        <el-form-item label="版本号 :" prop="version">
          <span class="!w-220px text-16px">{{ formData.version }}</span>
        </el-form-item>
        <el-form-item label="创建人名称 :" prop="creatorName">
          <span class="!w-220px text-16px font-500">{{ formData.creatorName }}</span>
        </el-form-item>
        <el-form-item label="说明 :" prop="remark">
          <span class="!w-220px text-16px font-500">{{ formData.remark }}</span>
        </el-form-item>
      </el-form>
      <!-- 表单数据 -->
      <el-table
        ref="multipleTableRef"
        default-expand-all
        row-key="id"
        v-loading="loading"
        :data="craftData"
        border
      >
        <el-table-column label="工序号" type="index" align="center" width="80">
          <template #default="scope">
            {{ formatIndex(scope.row, scope.row.index) }}
          </template>
        </el-table-column>
        <el-table-column label="工序名称" align="center" prop="dictProcessName">
          <template #default="scope">
            <dict-tag type="craft_process_name" :value="scope.row.dictProcessName" />
          </template>
        </el-table-column>
        <el-table-column label="关系类型" align="center" prop="dictRelationType">
          <template #default="scope">
            <dict-tag type="dict_relation_type" :value="scope.row.dictRelationType" />
          </template>
        </el-table-column>
        <el-table-column label="作业指导书" align="center" prop="instructorBook">
          <template #default="scope">
            <el-tag
              class="tag"
              :type="'success'"
              disable-transitions
              @click="jobGuideBook(scope.row)"
              >{{ scope.row.instructorBook }}</el-tag
            >
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>
  </div>
  <!-- 表单弹窗：添加/修改 -->
  <CraftGuideBookForm ref="formRef" @success="open" />
</template>
<script setup lang="ts">
import * as CraftCourseApi from '@/api/config/craftCourse'
import { formatDate } from '@/utils/formatTime'
import { useTagsViewStore } from '@/store/modules/tagsView'
import CraftGuideBookForm from './CraftGuideBookForm.vue'
const { query } = useRoute() // 路由的查询
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const loading = ref(false) // 表单的加载
const formData = ref({
  id: undefined,
  carftName: undefined,
  productNumber: undefined,
  productName: undefined,
  partName: undefined,
  partNumber: undefined,
  productDrawingNumber: undefined,
  partSpecification: undefined,
  version: undefined,
  productType: undefined,
  createTime: null as any,
  creatorName: undefined,
  remark: undefined,
  dictCourseStatus: undefined
})
const craftData = ref([]) // 表单数据

/** 打开弹窗 */
const open = async () => {
  // 修改时，设置数据
  if (query.id) {
    let id = query.id as any
    formLoading.value = true
    try {
      formData.value = await CraftCourseApi.getCraftCourse(id)
      const data = await CraftCourseApi.getCraftCourseList(id)
      craftData.value = data.map((item, index) => {
        item.parentIndex = index
        let childIndex = index
        if (item.children) {
          item.children.map((child, index) => {
            child.childrenIndex = childIndex
            child.index = index
            return child
          })
        }
        return item
      })
    } finally {
      formLoading.value = false
    }
  }
}

// 指导书查看
const formRef = ref()
const jobGuideBook = (row) => {
  const dict = {
    dictProcessName: row.dictProcessName,
    partName: formData.value.partName,
    productNumber: formData.value.productNumber
  }
  formRef.value.open(dict)
}

// 序号
const formatIndex = (row, index) => {
  if (row.children) {
    return `${row.parentIndex + 1}`
  } else {
    return `${row.childrenIndex + 1}-${index + 1}`
  }
}

// 返回
const tagsViewStore = useTagsViewStore()
const route = useRouter() // 路由
const goBack = () => {
  //获取当前路由并删除tagView
  tagsViewStore.delView(route.currentRoute.value)
  route.push({
    path: '/config/config/craftCuttingWeight/craft-course'
  })
}

const contentHeight = ref(0)
onMounted(async () => {
  contentHeight.value = document.body.clientHeight - 127
  await open()
})
</script>
<style lang="scss" scoped>
.tag {
  cursor: pointer;
}
</style>
